import { Button, Card, Col, Row, Notification } from '@douyinfe/semi-ui';
import React, { useEffect, useMemo, useState, useReducer } from 'react';
import { Route, Routes, useLocation, useNavigate, useNavigation, useParams } from 'react-router-dom';
import combineReducers from 'react-combine-reducers';
import DictionaryCard from './dictionary-card';
import { DictionaryConsumer, DictionaryProvider, DictionaryStoreProvider } from './dictionary-context';
import DictionaryEntityCard from './entity/dictionary-entity-card';
import DictionaryEntityDialog from './entity/dictionary-entity-dialog';
import { deleteItem, setItem } from './reducer/dictionary-actions';
import { initialDictionary, dictionaryReducer } from './reducer/dictionary-reducer';

const DictionaryPage = () => {
  const navigate = useNavigate();
  const location = useLocation();

    const [state, dispatch] = useReducer(
            //@ts-ignore
    ...combineReducers({
      dictionary: [dictionaryReducer,initialDictionary],
    })
  );
  const useDispatch = (callback: any, ...params: any[]) =>
    callback(...params, dispatch, state);


  const PageEvents = {
    addRecord: () => {
      console.log('add');
      navigate('create');
    },
    detailRecord: (id: string) => {
      useDispatch(setItem, id);
      navigate(`detail/${id}`);
    },
    editRecord: (id: string) => {
      useDispatch(setItem, id);
      navigate(`edit/${id}`);
    },
    delRecord: (id: string) => {
      return useDispatch(deleteItem, id);
    },
  };

  const store={
        state,
        useDispatch,
      }

  return (
    <DictionaryStoreProvider
      store={store}>
    <DictionaryProvider PageEvents={PageEvents}>
      <DictionaryConsumer>
        {({ showFloater, setShowFloater }) => (
          <>
            <Routes>
              <Route path="edit/:id" element={<DictionaryCard />} />
              <Route path="detail/:id" element={<DictionaryEntityCard />} />
              <Route path="create" element={<DictionaryCard />} />
              <Route index element={<DictionaryCard />} />
            </Routes>

            {showFloater && (
              <Card className="absolute end-3 top-3 bottom-3 w-1/5 min-w-[320px] shadow-2xl z-[1000]" bordered={false}>
                floater
                <Button onClick={() => setShowFloater(false)}>close</Button>
              </Card>
            )}
          </>
        )}
      </DictionaryConsumer>

      <Routes>
        <Route
          path="create"
          element={
            <DictionaryEntityDialog
              open
              editable
              onClose={() => {
                navigate('');
              }}
            />
          }
        />
        <Route
          path="edit/:id"
          element={
            <DictionaryEntityDialog
              open
              editable
              onClose={() => {
                navigate('');
              }}
            />
          }
        />
      </Routes>
    </DictionaryProvider>
     </DictionaryStoreProvider>
  );
};

export default DictionaryPage;
